<template>
  <div>
    <mt-swipe :auto="4000">
      <!--在组件中使用v-for循环，要加key-->
      <!--lunbotuList由父组件传递给子组件-->
      <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
        <img :src="item.img" :class="{'full' : isfull}" alt="" @error="imgError(item)">
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
  export default {
    props: ['lunbotuList', 'isfull'],
    methods: {
      imgError(item) {
        //图片加载失败的默认图片
        item.img = 'http://img.mp.sohu.com/upload/20170715/7b3ce9cd49604308bdd2b7755f52cab9_th.png';
      }
    }
  }
</script>

<style lang="scss" scoped>
  .mint-swipe {
    height: 200px;

    .mint-swipe-item {
      text-align: center;

      img {
        height: 100%;
      }
    }
  }

  .full {
    width: 100%;
  }
</style>